{% extends 'user/udai_welcome.html' %}
{% load static %}
<!-- 顶部tab -->
<div class="content clearfix bgf5">
    <section class="user-center inner clearfix">
        {% block siyou %}
        <div class="pull-right">
            <div class="user-content__box clearfix bgf">
                <div class="title">账户信息-个人资料</div>
                <div class="port b-r50" id="crop-avatar">
                    <img src="{{ user.userinfo_set.get.head_photo }}" class="cover b-r50">
                </div>
                <form action="{% url 'user:udai_setting' %}" class="user-setting__form" role="form" method="post">
                    {% csrf_token %}
                    <div class="user-form-group">
                        <label for="user-id">用户名：</label>
                        <input type="text" id="user-id" value="{{ user.username }}" placeholder="请输入您的昵称" name="n_id">
                    </div>
                    <div class="user-form-group">
                        <label>等级：</label>
                        {{ user.userinfo_set.get.vip.vip }} <a href="{% url 'user:agent_level' %}">提升</a>
                    </div>
                    <div class="user-form-group">
                        <label>性别：</label>
                        <label><input type="radio" name="sex" value="男"><i class="iconfont icon-radio"></i> 男</label>
                        <label><input type="radio" name="sex" value="女"><i class="iconfont icon-radio"></i> 女</label>
                        <label><input type="radio" name="sex" value="保密"><i class="iconfont icon-radio"></i>
                            保密</label>
                    </div>
                    <div class="user-form-group">
                        <button class="btn" type="submit">确认修改</button>
                    </div>
                </form>
                <script src="{% static 'js/zebra.datepicker.min.js' %}"></script>
                <link rel="stylesheet" href="{% static 'css/zebra.datepicker.css' %}">
                <script>
                    $('input.datepicker').Zebra_DatePicker({
                        default_position: 'below',
                        show_clear_date: false,
                        show_select_today: false,
                    });
                </script>
            </div>
        </div>
        {% endblock %}
    </section>
</div>
<!-- 头像选择模态框 -->
<link href="{% static 'css/cropper/cropper.min.css' %}" rel="stylesheet">
<link href="{% static 'css/cropper/sitelogo.css' %}" rel="stylesheet">
<script src="{% static 'js/cropper/cropper.min.js' %}"></script>
<script src="{% static 'js/cropper/sitelogo.js' %}"></script>
<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog"
     tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form class="avatar-form" action="#" enctype="multipart/form-data" method="post">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title" id="avatar-modal-label">Change Logo Picture</h4>
                </div>
                <div class="modal-body">
                    <div class="avatar-body">
                        <div class="avatar-upload">
                            <input class="avatar-src" name="avatar_src" type="hidden">
                            <input class="avatar-data" name="avatar_data" type="hidden">
                            <label for="avatarInput">图片上传</label>
                            <input class="avatar-input" id="avatarInput" name="avatar_file" type="file"></div>
                        <div class="row">
                            <div class="col-md-9">
                                <div class="avatar-wrapper"></div>
                            </div>
                            <div class="col-md-3">
                                <div class="avatar-preview preview-lg"></div>
                                <div class="avatar-preview preview-md"></div>
                                <div class="avatar-preview preview-sm"></div>
                            </div>
                        </div>
                        <div class="row avatar-btns">
                            <div class="col-md-9">
                                <div class="btn-group">
                                    <button class="btn" data-method="rotate" data-option="-90" type="button"
                                            title="Rotate -90 degrees"><i class="fa fa-undo"></i> 向左旋转
                                    </button>
                                </div>
                                <div class="btn-group">
                                    <button class="btn" data-method="rotate" data-option="90" type="button"
                                            title="Rotate 90 degrees"><i class="fa fa-repeat"></i> 向右旋转
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <button class="btn btn-success btn-block avatar-save" type="submit"><i
                                        class="fa fa-save"></i> 保存修改
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>

